<template>
  <div id="app">
    <div class="customer">
      <div class="tit">
        <span class="iconfont icon-xiaoxi"></span>
        <a href="./setup.html"><span class="iconfont icon-shezhi"></span></a>
      </div>
      <div class="people">
        <div class="head"><img></div>
        <div class="name">
          <p>{{userName}}</p>
          <p>金卡</p>
        </div>
      </div>
    </div>
    <div class="wealth">
      <ul>
        <li>
          <span>{{integral}}</span>
          <p>我的积分</p>
        </li>
        <li>
          <a href="./cardbag.html">
          <span>{{coupon}}</span>
          <p>我的卡券</p>
          </a>
        </li>
        <li>
          <span class="iconfont icon-wodecaifu"></span>
          <p>我的财富</p>
        </li>
      </ul>
    </div>
    <div class="order">
      <ul>
        <li>
          <a href="./order.html">
            <span class="iconfont icon-daizhifu"></span>
            <mt-badge size="small" type="error" v-show="num=0?true:num">{{num}}</mt-badge>
            <p>待支付</p>
          </a>
        </li>
        <li>
          <span class="iconfont icon-icon3"></span>
          <mt-badge size="small" type="error" v-show="num1=0?true:num1">{{num1}}</mt-badge>
          <p>待收货</p>
        </li>
        <li>
          <span class="iconfont icon-31daipingjia"></span>
          <mt-badge size="small" type="error" v-show="num2=0?true:num2">{{num2}}</mt-badge>
          <p>待评价</p>
        </li>
        <li>
          <span class="iconfont icon-dingdan"></span>
          <p>我的订单</p>
        </li>
      </ul>
    </div>
    <div class="pic">
      <mt-swipe :auto="4000">
        <mt-swipe-item :key="i" v-for="(v,i) in pic"><img :src="v.pc_img"></mt-swipe-item>
      </mt-swipe>
    </div>
    <div class="list">
      <ul>
        <li>
          <a href="./member.html">
            <span class="iconfont icon-tubiao-"></span>
            <p>会员权益</p>
          </a>
        </li>
        <li>
          <a href="./hypermarket.html">
            <span class="iconfont icon-shangcheng"></span>
            <p>阿伟商城</p>
          </a>
        </li>
        <li>
          <a href="./cardbag.html">
            <span class="iconfont icon-qianbao"></span>
            <p>我的券包</p>
          </a>
        </li>
        <li>
         <a>
           <span class="iconfont icon-lipinka"></span>
           <p>礼品卡</p>
         </a>
        </li>
        <li>
          <a>
            <span class="iconfont icon-wodejuanbao"></span>
            <p>领券中心</p>
          </a>
        </li>
        <li>
         <a href="./collection.html">
           <span class="iconfont icon-wodeshoucang"></span>
           <p>我的收藏</p>
         </a>
        </li>
        <li>
          <a>
            <span class="iconfont icon-yijianfankui"></span>
            <p>意见反馈</p>
          </a>
        </li>
      </ul>
    </div>
    <div class="foot"></div>
    <Nav></Nav>
  </div>
</template>
<script>
    import Nav from "../../components/Nav";
    export default {
        name:'App',
        components:{
            Nav
        },
        data(){
            return{
                num:0,
                num1:0,
                num2:0,
                integral:0,
                coupon:0,
                userImg:'',
                userName:'',
                userVip:'',
                pic:[]
            }
        },
        mounted(){
            //获取积分接口
            this.axios({
                method: 'get',
                url: '/api/UsersOperation/selectUserScore',
                params: {
                    "userId":"2"
                }
            }).then((res)=>{
                this.integral=res.data.data
            }).catch(()=>{
                console.log('网络错误')
            });
            //获取卡卷
            this.axios({
                method: 'get',
                url: '/api/CouponOperation/selectcpu',
                params: {
                    "userId":"1"
                }
            }).then((res)=>{
                this.coupon=res.data.data.length
            }).catch(()=>{
                console.log('网络错误')
            })
            //获取头像，名字
            this.axios({
                method: 'get',
                url: '/api/UsersOperation/selectUNHD',
                params: {
                    "userId":"1"
                }
            }).then((res)=>{
                this.userImg=res.data.datauserHeadimg
                this.userName=res.data.data.userName
            }).catch(()=>{
                console.log('网络错误')
            })
            //待支付订单数量获取
            this.axios({
                method:'get',
                url: '/api/orderOperation/selectPayStatus',
                params:{
                    "userId":"1"
                }
            }).then((res)=>{
                this.num = res.data.data.length
            }).catch(()=>{
                console.log('网络错误')
            })
            //获取待收货数量
            this.axios({
                method: 'get',
                url: '/apiorderOperation/selectSendStatus',
                params: {
                    "userId":"1"
                }
            }).then((res)=>{
                this.num1=res.data.data.length
            }).catch(()=>{
                console.log('网络错误')
            })
            //获取待评价数量
            this.axios({
                method: 'get',
                url: '/api/orderOperation/selectCommentStatus',
                params: {
                    "userId":"1"
                }
            }).then((res)=>{
                this.num2=res.data.data.length
            }).catch(()=>{
                console.log('网络错误')
            })
            //获取轮播图
            this.axios({
                method: 'get',
                url: '/web/getIntegralCateList',
            }).then((res)=>{
               console.log(res.data.data)
                for (let i=0;i<res.data.data.length;i++){
                    if (res.data.data[i].pc_name=="sp"){
                        this.pic.push(res.data.data[i])
                    }
                }
                console.log(this.pic[0].pc_img)
            }).catch(()=>{
                console.log('网络错误')
            })
        }
    }
</script>
<style lang="less">
  @baseFontSize:20px;
  @baseSize:20;
  html{
    font-size: @baseFontSize;
  }
  .px2rem(@name,@px){
      @{name}:@px / 2 / @baseSize * 1rem;
  }

  *{
    margin: 0;
    padding: 0;
    text-decoration: none;
    list-style: none;
  }
#app {
  background: #f5f5f5;
  a{
    color: black;
  }
  .customer{
    background: orange;
    .px2rem(height,340);
    border-bottom: 1px solid gray;
    .tit{
      display: flex;
      .px2rem(padding,30);
      .iconfont{
        .px2rem(font-size,45)
      }
      span{

        &:last-child{
          text-align: right;
        }
        flex: 1;
      }
    }
    .people{
      .px2rem(margin-top,30);
      display: flex;
      .px2rem(padding-left,45);
      .head{
        .px2rem(width,105);
        .px2rem(height,105);
        border-radius: 50%;
        border: 1px solid gray;
      }
      .name{
        .px2rem(margin-left,45);
        color: white;
        p{
          &:last-child{
            .px2rem(font-size,30);
          }
        }
      }
    }
  }
  .wealth{
    .px2rem(padding,30);
    ul{
      background: white;
      display: flex;
      li{
        flex: 1;
        text-align: center;
        .px2rem(margin-top,30);
        .px2rem(height,140);
        .iconfont{
          .px2rem(font-size,45);
        }
        p{
          .px2rem(font-size,30)
        }
      }
      li:nth-child(2){
        border-right: 1px solid gray;
      }
      li:nth-child(3){
        color: red;
      }
    }
  }
  .order{
    .px2rem(padding,30);
    ul{
      background: white;
      display: flex;
      li{
        flex: 1;
        text-align: center;
        .px2rem(margin-top,30);
        .px2rem(height,140);
        .iconfont{
          .px2rem(font-size,40)
        }
        p{
          .px2rem(font-size,30)
        }
      }
      li:nth-child(3){
        border-right: 1px solid gray;
      }
      li:nth-child(4){
        color: red;
      }
    }
  }
  .pic{
    .px2rem(margin,30);
    .px2rem(height,165);
    border: 1px solid gray;
    border-radius: 10px;
    img{
      width:100%;
      height:100%;
    }
  }
  .list{
    background: white;
    .px2rem(padding,30);
    ul{
      display: flex;
      .px2rem(width,690);
      flex-wrap: wrap;
      justify-content: space-between;
      li{
        .px2rem(width,165);
        .px2rem(height,170);
        text-align: center;
        .iconfont{
          .px2rem(font-size,45)
        }
        p{
          .px2rem(font-size,30)
        }
      }
    }
  }
  .foot{
    .px2rem(height,180);
    background: #f5f5f5;
  }
}


</style>
